<script lang="ts" setup>
import { GetMediaConfigList } from "@/types/user.ts";
import { useI18n } from "vue-i18n";
import { onMounted, ref } from "vue";
import { HomeAxios } from "@/api";
const { t } = useI18n();
const props = defineProps<{
  mediaList: GetMediaConfigList[];
}>();
const openLink = item => {
  const regex = /https?:\/\//;
  if (item.mediaLink && item.mediaLink !== "" && regex.test(item.mediaLink)) {
    const timeout = setTimeout(() => {
      clearTimeout(timeout);
      window.open(item.mediaLink);
    }, 300);
  }
};
const content = ref("");
onMounted(() => {
  getFooterOfficialConfig();
});
//获取网站底部公告
const getFooterOfficialConfig = () => {
  HomeAxios.getFooterOfficialConfig().then(res => {
    content.value = res.content
      .replace(/\\n/g, "\n")
      .replace(/\r/g, "")
      .replace(/\n\n/g, "<br><br>")
      .replace(/\n/g, "<br>"); // 替换双换行为两个 <br>
  });
};
const emits = defineEmits(["donwFum"]);
//点击下载pwa和apk包
const promptUser = () => {
  emits("donwFum", 2);
};
</script>
<template>
  <!-- 底部的宣传公告 -->
  <div class="promotion-announcement-frame">
    <div class="game-manufacturers-frame">
      <div class="manufacturers-title-frame df ai-center">
        <img class="title-logo" src="@/image/new_img/home/Parceiros_45bai.png" />
        <div class="logo-name">{{ t("home.parceiros") }}</div>
      </div>
      <div class="logo-frame">
        <div class="logo0-img df ai-center jc-center">
          <img src="@/image/new_img/home/wan_zan_dizi.png" />
        </div>
        <div class="logo2-img df ai-center jc-center">
          <img src="@/image/new_img/home/game_logo_bottom/gblogo_1.png" />
        </div>
        <div class="logo2-img left1 df ai-center jc-center">
          <img src="@/image/new_img/home/game_logo_bottom/gblogo_2.png" />
        </div>
        <div class="logo2-img left2 df ai-center jc-center">
          <img src="@/image/new_img/home/game_logo_bottom/gblogo_4.png" />
        </div>
        <div class="logo2-img bottom1 df ai-center jc-center">
          <img src="@/image/new_img/home/game_logo_bottom/gblogo_6.png" />
        </div>
        <div class="logo2-img right1 df ai-center jc-center">
          <img src="@/image/new_img/home/game_logo_bottom/gblogo_7.png" />
        </div>
        <div class="logo2-img right2 df ai-center jc-center">
          <img src="@/image/new_img/home/game_logo_bottom/gblogo_5.png" />
        </div>
      </div>
    </div>
    <div class="down-frame df ai-center jc-space-between">
      <img class="wan_zan_dizi-frame" src="@/image/new_img/home/wan_zan_dizi.png" />
      <div class="right-btn df ai-center jc-center" @click="promptUser">Baixar APP</div>
    </div>
    <div class="promotion-announcement">
      <!-- <div class="operators-frame">
        <img class="img-frame" src="@/image/new_img/home/homev2_group_logolist.png" />
        <img class="logo-img-frame" src="@/image/new_img/home/logo_img.png" />
      </div> -->

      <div class="sdpromotion-frame">
        <div class="share-title-frame df ai-flex-end">
          <img class="fenxiang-bai-img" src="@/image/new_img/home/fenxiang_bai.png" />
          <span class="share-title-name"> {{ t("home.share") }}</span>
        </div>
        <div class="share-list-frame df ai-center jc-center">
          <div
            class="share-list-img"
            v-for="(item, index) in props.mediaList"
            :key="index"
            @click="openLink(item)"
          >
            <img
              class="share-img"
              :src="item.customBuoy === '' ? item.defaultBuoy : item.customBuoy"
            />
          </div>
        </div>
      </div>
      <!-- <span class="website-description-frame" v-html="content"> </span> -->
      <div class="website-description-frame" v-html="content"></div>
      <div class="dianzi"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.promotion-announcement-frame {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.promotion-announcement {
  width: calc(100% - 60px);
  height: auto;
  margin-left: 27px;
  .operators-frame {
    position: relative;
    left: 0;
    left: 0;
    width: 100%;
    height: auto;
    .img-frame {
      width: 100%;
      height: 354.281px;
    }
    .logo-img-frame {
      position: absolute;
      left: 0;
      top: 47%;
      right: 0;
      margin: auto;
      width: 132px;
      height: auto;
    }
  }
  .website-description-frame {
    font-size: 24px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 40px;
    white-space: pre-wrap; /* 保留换行符 */
  }
  .dianzi {
    width: 100%;
    height: 60px;
  }
  .sdpromotion-frame {
    width: 100%;
    height: auto;
    background-color: #ffffff05;
    padding-bottom: 20px;
    margin-bottom: 40px;
    .share-title-frame {
      width: 100%;
      height: 90px;
      .fenxiang-bai-img {
        width: 34px;
        height: 34px;
        margin-bottom: 15px;
        margin-left: 10px;
      }
      .share-title-name {
        font-size: 24px;
        margin-left: 10px;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 15px;
      }
    }
    .share-list-img {
      width: 76px;
      height: 76px;
      margin: 8px;
    }
    .share-list-img:active {
      background-color: #ffffff;
      border-radius: 50%;
    }
    .share-img {
      width: 76px;
      height: 76px;
    }
  }
}
.down-frame {
  width: 100%;
  height: 132px;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  img {
    width: 212px;
    height: 50px;
    margin-left: 38px;
  }
}
.right-btn {
  width: 184px;
  height: 66px;
  border-radius: 66px;
  border-radius: 66px;
  background-color: #ffffff14;
  font-size: 20px;
  color: #ffffffa6;
  margin-right: 38px;
}
.game-manufacturers-frame {
  width: 100%;
  height: auto;
  .manufacturers-title-frame {
    width: 100%;
    height: 90px;
  }
  .title-logo {
    width: 66px;
    height: 66px;
    margin-right: 10px;
    margin-left: 38px;
  }
  .logo-name {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
  }
}
.logo-frame {
  width: 100%;
  height: 400px;
  position: relative;
  left: 0px;
  top: 0;
  margin-bottom: 30px;
  img {
    width: 112px;
    height: 26px;
  }
  .logo0-img {
    width: 170px;
    height: 100px;
    background-color: #ffffff14;
    border: 1px solid #ffffff0a;
    border-radius: 34px;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -45%);
    z-index: 1;
    img {
      width: 112px;
      height: 26px;
    }
  }
  .logo2-img {
    width: 170px;
    height: 100px;
    position: absolute;
    border: 1px solid #ffffff0a;
    background-color: #ffffff05;
    border-radius: 34px;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: 1;
    img {
      width: 160px;
      height: 50px;
    }
  }
  .left1 {
    left: 13%;
    top: 16%;
    transform: none;
  }
  .left2 {
    left: 13%;
    top: 50%;
    transform: none;
  }
  .bottom1 {
    top: 67%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .right1 {
    left: 64.5%;
    top: 16%;
    transform: none;
    img {
      width: 100px;
      height: 50px;
    }
  }
  .right2 {
    left: 64.5%;
    top: 50%;
    transform: none;
  }
}
</style>
